<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <!--<h1 :style=[styleObj1,styleObj2]>Vue</h1>-->
    <h1 :style="[styleObj1]">Vue</h1>
    <h1 :style="[styleObj1,styleObj2]">React</h1>
    <h1>Angular</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    /*
    * 数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。
    * 但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。
    * 因此，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。
    * */
    const app = Vue.createApp({
        data() {
            return {
                styleObj1:{
                    backgroundColor:'red',
                    fontsize:'50px'
                },
                styleObj2:{
                    textAlign:'center'
                }
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>
